<template>
  <el-card class="merchant-card" shadow="never">
    <template #header>
      <div class="card-header">
        <el-icon style="margin-right: 8px">
          <Shop/>
        </el-icon>
        <span>商家信息</span>
      </div>
    </template>

    <el-row :gutter="20">
      <el-col :span="18">
        <div class="merchant-info">
          <div class="merchant-header">
            <el-avatar
                :icon="UserFilled"
                :size="60"
                :src="merchant.avatar?.url"
            />
            <div class="merchant-details">
              <h3>{{ merchant.name }}</h3>
              <div class="merchant-rating">
                <el-rate
                    :model-value="merchant.rating"
                    disabled
                    score-template="{value}分"
                    show-score
                    text-color="#ff9900"
                />
              </div>
              <p class="merchant-address">
                <el-icon>
                  <Location/>
                </el-icon>
                {{ merchant.address }}
              </p>
            </div>
          </div>

          <div class="merchant-extra-info">
            <div class="delivery-time">
              <el-icon>
                <Clock/>
              </el-icon>
              <span>营业时间：{{ merchant.deliveryTime }}</span>
            </div>
            <div v-if="merchant.announcement" class="announcement">
              <el-icon>
                <Bell/>
              </el-icon>
              <span>公告：{{ merchant.announcement }}</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="merchant-actions">
          <el-button
              :type="merchant.collect ? 'warning' : 'primary'"
              size="large"
              style="width: 100%"
              @click="handleCollectMerchant"
          >
            <el-icon>
              <Star/>
            </el-icon>
            {{ merchant.collect ? '取消收藏' : '收藏商家' }}
          </el-button>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup>
import {defineProps} from 'vue';
import {Bell, Clock, Location, Shop, Star, UserFilled} from '@element-plus/icons-vue';
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";

// 定义接收的 props
const props = defineProps({
  merchant: {
    type: Object,
    required: true
  }
});

// 收藏商家
const handleCollectMerchant = async () => {
  const msg = await request.post('/collect', {
    businessType: 4, // 业务类型为商家
    businessId: props.merchant.id
  })
  props.merchant.collect = !props.merchant.collect
  ElMessage.success(msg)
}
</script>

<style scoped>
.merchant-card {
  margin-bottom: 20px; /* 保持外部间距 */
  border-radius: 12px;
}

.card-header {
  display: flex;
  align-items: center;
  font-size: 16px; /* 确保标题大小一致 */
  font-weight: 500; /* 适当的粗细 */
  color: #303133;
}

.merchant-info {
  width: 100%;
}

.merchant-header {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.merchant-details h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.merchant-rating {
  margin-bottom: 8px;
}

.merchant-address {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #606266;
  margin: 0;
}

.merchant-extra-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.delivery-time, .announcement {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #606266;
}

.merchant-actions {
  display: flex;
  align-items: center;
  height: 100%; /* 确保按钮垂直居中 */
  justify-content: flex-end; /* 将按钮推到右边 */
}

/* 按钮的 flex: 1 放在原组件中，因为这里只需要一个按钮 */
.merchant-actions .el-button {
  width: 100%; /* 确保按钮填充其父容器的宽度 */
}
</style>